<template>
  <div id="piedom" :style="{ width: w, height: h }"></div>
</template>

<script>
import { nextTick } from 'vue'
import * as echarts from 'echarts'
export default {
  name: '',
  data() {
    return {}
  },
  props: {
    piedata: {
      // 对象形式接收数据 父传子
      type: Array,
      required: true
    },
    w: {
      type: String,
      default: '400px'
    },
    h: {
      type: String,
      default: '400px'
    }
  },
  mounted() {
    nextTick(() => {
      var myChart = echarts.init(document.getElementById('piedom'))

      //   console.log('父传子', this.piedata)
      console.log('饼图组件实例', this)
      myChart.setOption({
        legend: {
          top: 'top'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [20, 100],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: this.piedata.map((item) => {
              return { value: item.val, name: item.x }
            })
          }
        ]
      })
    })
  }
}
</script>
<style scoped>
#piedom {
  border: 1px solid black;
}
</style>